<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定位属性</title>
        <style>
            /* div宽高一致  300px *300px，圆，文本放大 ：10em，垂直居中，
            每个圆添加一个颜色
            */
           div {
               width:200px;
               height:200px;
               border:1px so lid red;
               border-radius:50%;
               font-size: 10em;
               text-align:center;
               line-height:200px;
               color:#fff;
               /* 网页阴影：①滤镜：下阴影  ②：文本阴影  ③：盒子阴影
                          属性值：X   Y   模糊半径  阴影半径  颜色 内外阴影 inset*/
               box-shadow:5px 5px 30px 10px #6d6869 inset;
               /* 浮动定位：float 属性：none|left|right */
               float:left;
              
           }
           
           span.d1{
                          background-color:#ffff7f;
           }
           span.d2{
               background-color:#ffc0d3;
           }
           span.d3{
                          background-color:#ffaaff;
                        /* clear 清除浮动：left|right|both  直接作用在浮动的元素上 */
                        clear:left;
           }
           span.d4{
                          background-color:#b3fff9;
           }
           span.d5{
                          background-color:#ffc9b3;
           }
           
        </style>
    </head>
    <body>
        <!-- 什么是定位？页面元素通过"定位方式"指定具体位置
        定位方式五种：①：普通流定位【文档流定位】：页面元素分为:块，行，行内块元素，按照元素特点定位元素
                    ②：浮动定位 页面上左右布局，让元素飘起来，飘起来的元素转换成块元素
         -->
         <span class="d1">1</span>
         <span class="d2">2</span>
         <span class="d3">3</span>
         <span class="d4">4</span>
         <span class="d5">5</span>
    </body>
</html>